import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined, PhoneOutlined, MailOutlined } from '@ant-design/icons';
import { register } from '@/api/auth';

const Register: React.FC = () => {
  const [ loading, setLoading ] = useState(false);
  const navigate = useNavigate();

  const onFinish = async (values: any) => {
    setLoading(true);
    try {
      const res = await register({
        phone: values.phone,
        email: values.email,
        password: values.password,
        username: values.username,
        realName: values.realName
      });

      if (res.success) {
        message.success('注册成功');
        navigate('/login');
      } else {
        message.error(res.msg);
      }
    } catch (e) {
      console.log(e)
      message.error('注册失败，请检查网络或联系管理员');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="w-full max-w-md p-8 space-y-8 bg-white rounded-xl shadow-2xl">
        <div className="text-center">
          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
            用户注册
          </h2>
          <p className="mt-2 text-sm text-gray-600">
            创建您的账户
          </p>
        </div>

        <Form
          name="register"
          onFinish={ onFinish }
          className="mt-8 space-y-6"
        >
          <Form.Item
            name="username"
            rules={ [ { required: true, message: '请输入用户名!' } ] }
          >
            <Input
              prefix={ <UserOutlined className="text-gray-400" /> }
              placeholder="用户名"
              size="large"
            />
          </Form.Item>

          <Form.Item
            name="realName"
            rules={ [ { required: true, message: '请输入真实姓名!' } ] }
          >
            <Input
              prefix={ <UserOutlined className="text-gray-400" /> }
              placeholder="真实姓名"
              size="large"
            />
          </Form.Item>

          <Form.Item
            name="phone"
            rules={ [ { required: true, message: '请输入手机号!' } ] }
          >
            <Input
              prefix={ <PhoneOutlined className="text-gray-400" /> }
              placeholder="手机号"
              size="large"
            />
          </Form.Item>

          <Form.Item
            name="email"
            rules={ [
              { required: true, message: '请输入邮箱!' },
              { type: 'email', message: '请输入有效的邮箱地址!' }
            ] }
          >
            <Input
              prefix={ <MailOutlined className="text-gray-400" /> }
              placeholder="邮箱"
              size="large"
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={ [ { required: true, message: '请输入密码!' } ] }
          >
            <Input
              prefix={ <LockOutlined className="text-gray-400" /> }
              type="password"
              placeholder="密码"
              size="large"
            />
          </Form.Item>

          <Form.Item
            name="confirm"
            dependencies={ [ 'password' ] }
            rules={ [
              { required: true, message: '请确认密码!' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入的密码不一致!'));
                },
              }),
            ] }
          >
            <Input
              prefix={ <LockOutlined className="text-gray-400" /> }
              type="password"
              placeholder="确认密码"
              size="large"
            />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={ loading }
              className="w-full btn-primary"
              size="large"
            >
              注册
            </Button>
          </Form.Item>

          <div className="text-center">
            <a className="text-blue-500 hover:text-blue-700" href="/login">
              已有账号？立即登录
            </a>
          </div>
        </Form>
      </div>
    </div>
  );
};

export default Register;
